import { CloseOutlined } from "@ant-design/icons";
import { Button, Spin, Tooltip } from "antd";
import { useState, useEffect, useRef } from "react";

import Remove from "~/components/Remove";
import { Chart, ChartType, ChartItem } from "~/modules/workspace/models";
import { useWorkSpace } from "~/modules/workspace/store/use-workspace";
import eventBus from "~/utils/event";

const ChartItemOptions = () => {
  const { workSpace } = useWorkSpace();
  // 已选择的图表
  const [selectChart, setSelectChart] = useState<{
    name: string;
    index: number;
  }>({
    name: "",
    index: 0,
  });
  // 获取删除弹框的dom
  const removeRef = useRef();
  // 删除chart
  const [delText, setDelText] = useState<string>("");

  const onSelectChartName = (chart: ChartItem, index: number) => {
    setSelectChart({ name: chart.name, index });
    eventBus.emit("switchEcharts", { chart, index });
  };
  // useEffect(() => {
  //   eventBus.emit("switchEcharts", {
  //     chart: selectChart,
  //     index: selectChart.index,
  //   });
  // }, [selectChart.name]);

  const selectCHartStyle = {
    width: "3px",
    backgroundColor: "#1890ff",
  };
  const notSelectCHartStyle = {
    width: "3px",
  };
  const onDelTask = () => {};

  const chartItemName = workSpace.splitCharts.map(
    (chart: ChartItem, index: number) => {
      return (
        <div
          key={index}
          className={`w-65px z-1 flex  text-center  chart-list-chart-name-list-item ${
            chart.IsTop && "chart-list-chart-name-list-item-IsTop"
          }`}
          style={{
            top: `${
              45 + index * (Number(workSpace.setting.chartsHeight) + 60)
            }px`,
          }}
          onClick={() => onSelectChartName(chart, index)}
        >
          <div
            style={
              chart.name === selectChart.name && index === selectChart.index
                ? selectCHartStyle
                : notSelectCHartStyle
            }
          />
          <Button
            className="w-15px! h-15px! ml-2px chart-list-chart-name-list-item-delBtn"
            type="text"
            icon={<CloseOutlined />}
            onClick={() => {
              setDelText(`是否删除图表 ${chart.name} ？`);
              removeRef.current && (removeRef.current as any).onDelete();
            }}
          />
          <Tooltip title={chart.name}>
            <p
              className=" text-10px truncate pt-5px chart-list-chart-name-list-item-p"
              style={{
                height: `${Number(workSpace.setting.chartsHeight) + 10}px`,
              }}
            >
              {chart.name}
            </p>
          </Tooltip>
        </div>
      );
    }
  );
  return (
    <div>
      {chartItemName}
      <Remove ref={removeRef} delText={delText} onDelTask={onDelTask} />
    </div>
  );
};
export default ChartItemOptions;
